<template>
    <config-provider :locale="lang == 'zh' ? zhCN : enUS">
        <router-view v-slot="{ Component }">
            <component :is="Component" />
        </router-view>
    </config-provider>
    <lockscreen v-show="isLocked"></lockscreen>
</template>

<script lang="ts">
import { defineComponent, watch, computed, ref, ComputedRef, onMounted, onUnmounted } from 'vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enUS from 'ant-design-vue/es/locale/en_US';
import { ConfigProvider } from 'ant-design-vue';
import moment from 'moment';
import 'moment/dist/locale/zh-cn';
import { useStore } from 'vuex';
import { storage } from '@/utils';
import { LayoutMutationType } from './enums/layoutEnums';
import { lockscreen } from '@/components/lockscreen';
import { useRoute } from 'vue-router';
import { notNeedLogin } from '@/router/guard';

export default defineComponent({
    name: 'App',
    components: { ConfigProvider, lockscreen },
    setup() {
        const store = useStore();
        const route = useRoute();

        // 语言
        const savedLang = storage.get(LayoutMutationType.SetLang);
        moment.locale(savedLang || 'zh-cn');
        const lang = ref<ComputedRef<string>>(computed(() => store.getters.lang));
        watch(
            () => lang.value,
            (newValue) => {
                newValue == 'zh' ? moment.locale('zh-cn') : moment.locale(newValue);
            },
            {
                immediate: true,
            }
        );

        // 锁屏时间 默认30分钟无操作锁屏
        const defaultLockTime = 30 * 60;
        let lockTime = defaultLockTime;
        const isLocked = computed(() => store.state.layout.isLock);
        watch(
            () => isLocked.value,
            (newValue) => {
                !newValue && setLockTime();
            }
        );
        let t: number;
        const setLockTime = () => {
            t = window.setTimeout(() => {
                if (isLocked.value || notNeedLogin.includes(route.name as string)) {
                    clearTimeout(t);
                } else {
                    lockTime -= 1;
                    if (lockTime == 0) {
                        store.commit(LayoutMutationType.SetLock, true);
                    }
                    setLockTime();
                }
            }, 1000);
        };

        const resetLockTime = () => {
            lockTime = defaultLockTime;
        };

        onMounted(() => {
            setLockTime();
            window.addEventListener('click', resetLockTime);
        });

        onUnmounted(() => {
            window.removeEventListener('click', resetLockTime);
        });

        return {
            zhCN,
            enUS,
            lang,
            isLocked,
        };
    },
});
</script>
<style>
@import 'styles/icon/iconfont.css';
</style>
<style lang="scss">
@import 'styles/common.scss';

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}
#app {
    width: 100%;
    height: 100%;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class^='i-icon-'],
[class*=' i-icon-'] {
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-flex;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
// 脱离父节点的元素使用 比如 一些弹窗 下拉框
.app-align-center {
    display: flex;
    align-items: center;
}
</style>
